<template>
	<view class="content">
		<view class="contact">
			<image v-if="currTab!='team'" class="contactBg" src="../../static/index/contact_bg.png" mode="widthFix"></image>
			<view class="members" :style="{marginTop: currTab=='team' ? '68rpx':'134rpx'}">
				<view class="member" v-for="(item,index) in members" :key="index" v-if="index<2 || currTab=='team'" @click="goToContactDeatil(index)">
					<image :src="currTab=='team' ? `../../static/team/${item.name}.png`:`../../static/index/${item.name}_icon.png`" mode="widthFix" :class="{teamImg:currTab=='team'}"></image>
					<view class="null"></view>
					<block v-if="index<2">
						<image class="qrcodeIcon" src="../../static/index/qrcode_icon.png" mode="" ></image>
						<image class="telIcon" src="../../static/index/tel_icon.png" mode=""  @click.stop="callPhone(index)"></image>
					</block>
				</view>
			</view>
		</view>
		<image class="bottomBg" :style="{ top: bgTop + 'rpx' }" :src="bottomBgUrl" mode="widthFix"></image>
		<view class="bottom" :style="{marginTop: currTab=='team' ? '100rpx':'200rpx'}">
			<view class="bottomContent">
				<image class="bottomTitle" src="../../static/bottom_title.png" mode="widthFix"></image>
				<image class="shareIcon" src="../../static/index/share_icon.png" mode="widthFix" @click="shareAction"></image>
				<button class="shareIcon" open-type="share" type="default" style="margin-top: -92rpx; background: rgba(0,0,0,0);"></button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props:["currTab"],
		data() {
			return {
				members:[
					{name:'cyz'},
					{name:'lk'},
					{name:'cj'},
					{name:'zy'},
					{name:'yl'}
				],
				bottomBgUrl: "https://dm.static.elab-plus.com/csc20201001/Elab-%E5%B0%BE%E9%83%A8%E7%BA%B9%E7%90%86.png",
				bgTop:0,
			};
		},
		mounted() {
			if(this.currTab=="elab"){
				this.bottomBgUrl = "https://dm.static.elab-plus.com/csc20201001/Elab-%E5%B0%BE%E9%83%A8%E7%BA%B9%E7%90%86.png";
			}else if(this.currTab=="project"){
				this.bottomBgUrl = "https://dm.static.elab-plus.com/csc20201001/%E9%A1%B9%E7%9B%AE-%E7%BA%B9%E7%90%862.png";
				this.bgTop = -100;
			}else if(this.currTab=="serve"){
				this.bottomBgUrl = "https://dm.static.elab-plus.com/csc20201001/%E6%9C%8D%E5%8A%A1-%E7%BA%B9%E7%90%86.png";
				this.bgTop = -150;
			}else if(this.currTab=="team"){
				this.bottomBgUrl = "https://dm.static.elab-plus.com/csc20201001/%E5%9B%A2%E9%98%9F-%E7%BA%B9%E7%90%86.png";
				this.bgTop = 800;
			}
		},
		methods:{
			goToContactDeatil(index){
				if(index>1){return}
				var member = index==0?'cyz':'lk';
				uni.navigateTo({
					url:"../../pages/contact/contact?member=" + member
				})
			},
			shareAction(){
				this.$u.mpShare = {
					title: 'Elab未来人居', // 默认为小程序名称，可自定义
					path: '', // 默认为当前页面路径，一般无需修改，QQ小程序不支持
					imageUrl: '' 
				}
			},
			callPhone(index){
				var phoneNumber = index==0? '+86-18616819079' : '+86-15221076782';// 
				uni.makePhoneCall({
				    phoneNumber: phoneNumber //仅为示例
				});
			}
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '',
		      path: ''
		    }
		 },
		 onShareTimeline(){
			 return {
			   title: 'ELAB柔性开发以需定产',
			   path: ''
			 }
		 }
	}
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		position: relative;
	}
	.contact {
		// margin-top: 20rpx;
		width: 710rpx;
		position: relative;
		z-index: 1000;
		.contactBg {
			width: 100%;
			position: absolute;
			z-index: -1;
		}
		.members {
			width: 100%;
			// position: absolute;
			// bottom: 18rpx;
			// left: 0;
			.member {
				width: 100%;
				padding: 0rpx 54rpx;
				box-sizing: border-box;
				margin-bottom: 40rpx;
				display: flex;
				align-items: center;
				// height: 120rpx;
				image {
					width: 358rpx;
					height: 120rpx;
				}
				.teamImg {
					width: 466rpx;
					height: 136rpx;
				}
				.null {
					flex-grow: 2;
				}
				.qrcodeIcon {
					width: 36rpx;
					height: 36rpx;
					margin-right: 32rpx;
				}
				.telIcon {
					width: 36rpx;
					height: 46rpx;
				}
			}
			
		}
		
	}
	
	.bottomBg {
		width: 100%;
		z-index: -3;
		position: absolute;
		top: 190rpx;
		left: 0;
	}
	.bottom {
		margin-top: 200rpx;
		width: 750rpx;
		position: relative;
		.bottomContent {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.bottomTitle {
				width: 328rpx;
				margin: 68rpx 0rpx;
			}
			.shareIcon {
				width: 280rpx;
				height: 92rpx;
			}
			button::after{ border: none; }
		}
	}

</style>
